<template>
    <el-container>
        <el-aside width="250px">
            <inspection-type @tree-node-click="routeClick"></inspection-type>
        </el-aside>
        <el-container>
            <el-header>
                <el-card class="box-card" style="height: 750px">
                    <div slot="header" class="clearfix">
                        <el-input placeholder="请输入内容" style="width: 300px"></el-input>
                        <el-button type="primary" size="small" style="margin-left: 15px">搜索</el-button>
                        <el-button type="primary" size="small">批量导入</el-button>
                        <el-button type="primary" size="small">Excel导出</el-button>
                        <el-button type="primary" size="small">批量删除项目</el-button>
                        <el-button type="success" size="small" @click="createPoint">创建巡检点</el-button>
                    </div>
                    <div class="text item">
                        <el-table :data="tableData" style="width: 100%" border>
                            <el-table-column prop="id" label="巡检点编号" width="180" align="center"></el-table-column>
                            <el-table-column prop="name" label="巡检点名称" width="180" align="center"></el-table-column>
                            <el-table-column prop="pointAlpha" label="巡检点编号" width="180" align="center"></el-table-column>
                            <el-table-column prop="markType" label="标识类型" align="center">
                                <template slot-scope="scope">
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium" style="color:#409EFF">{{scope.row.markType | tranMarkType}}</el-tag>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isScan" label="需要扫描开启" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.isScan" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0">
                                    </el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isEffective" label="是否有效" align="center">
                                <template slot-scope="scope">
                                    <el-switch v-model="scope.row.isEffective" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0"></el-switch>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                <template slot-scope="scope">
                                    <el-button type="success" size="small" @click="editPoint(scope.row.id)">编辑</el-button>
                                    <el-button type="danger" size="small" @click="deletePoint(scope.row.id, scope.row.name)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination style="margin-top: 80px" :current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="12" :total="1" layout="total, sizes, prev, pager, next, jumper">
                        </el-pagination>
                    </div>
                </el-card>
            </el-header>
        </el-container>
        <add-or-update ref="addOrUpdate" v-if="AddOrUpdateVisible" @refreshDataList="getDataList"></add-or-update>
    </el-container>
</template>

<script>
    import InspectionType from './inspection-type'
    import AddOrUpdate from './point-add-or-update'
    import axios from 'axios'

    export default {
        name: "point",
        components: {
            InspectionType, AddOrUpdate
        },
        data() {
            return {
                tableData: [],
                AddOrUpdateVisible: false,
                routes: [],
                routeId: 0
            }
        },
        methods: {
            routeClick(data, node, routes) {
                console.log('@@@', data, node, routes);
                this.routes = routes;
                this.routeId = data.id;
                // 获取某一条巡检路线下的所有巡检点
                axios.get('http://gulimall.com/api/inspection/point/listWithRoute', {params: {routeId: data.id}}).then(
                    response => {
                        this.tableData = response.data.data;
                    },
                    error => {
                        console.log('获取所有的巡检点信息出错');
                    }
                )
            },
            createPoint() {
                this.AddOrUpdateVisible = true;
                // $nextTick 等待 dialog 渲染完成之后，再去对 dialog 中的元素进行操作
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(null, this.routes, this.routeId);
                });
            },
            editPoint(id) {
                this.AddOrUpdateVisible = true;
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(id, this.routes, this.routeId);
                });
            },
            getDataList() {
                // 获取某一条巡检路线下的所有巡检点
                axios.get('http://gulimall.com/api/inspection/point/listWithRoute', {params: {routeId: this.routeId}}).then(
                    response => {
                        this.tableData = response.data.data;
                    },
                    error => {
                        console.log('获取所有的巡检点信息出错');
                    }
                )
            },
            deletePoint(id, name) {
                this.$confirm(
                    `确定对【${name}】进行删除操作?`,
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    axios.get('http://gulimall.com/api/inspection/point/delete', {params: {pointId: id}}).then(
                        response => {
                            this.$message({
                                message: "删除操作成功",
                                type: "success",
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList();
                                }
                            });
                        }
                    );
                })
            }
        },
        filters: {
            tranMarkType: function (type) {
                if (type === 1) return '二维码';
                if (type === 2) return '蓝牙';
                if (type === 3) return 'NFC';
            }
        }
    }
</script>

<style scoped>
</style>
